@import 'mixin';
@import 'iconfont';
@import 'color';

.container{
  &.login{background:$gray_bg url(../img/bg_green.jpg) no-repeat center bottom;background-size:cover;
    .header{
      .logo{background:url(../img/logo_w.png) no-repeat center;background-size:cover;}
      .right_nav{
        ul{
          li{color:$white;}
        }
      }
    }
    .content{
      h1{background-image:none;color:$white;}
      .login_form{
        .input_div{border:1px solid #019f8b;
          label{
            &.user{background:url(../img/theme_green/username.png) no-repeat center;}
            &.pwd{background:url(../img/theme_green/password.png) no-repeat center;}
          }
          input[type=text],input[type=password]{background-color:#e9f8f7;}
        }
        .input_btn{
          button{color:$white;background:#019f8b;}
        }
      }
    }
    .footer{
      p{color:$white;}
    }
  }
  .main_header{background:$green_main;
    .l_cont{
      .logo{background:url(../img/theme_green/logo.png) no-repeat center;}
      h1{color:$white;}
    }
    .m_cont{color:$yellow;
      a{color:$yellow;}
    }
    .r_cont{
      .cont{
        &:first-child{
          p{color:$white;}
        }
        &:last-child{color:$white;
          i{color:$white;}
        }
      }
    }
  }
  .menu{border-right:1px solid $gray_light;background-color:$green_lighter;
    .head{color:$white;background-color:$green_light;border-bottom:1px solid $green_main;
      .slip{background:$green_main;}
    }
    .user_cont{background-color:$green_light;
      p{color:$white;}
      .user_ctrl{
        li{color:$white;background:$green_main;
          .fa{color:$white;}
        }
      }
    }
    .nav{
      li{
        .fa.fa-caret-right,.fa.fa-caret-down,.iconfont{color:$darker;}
        a{color:$darker;}
        ul{
          li{
            a{color:lighten($darker,10%) !important;
              &:hover{color:$green_main;}
            }
            &.active{
              a{color:$green_main !important;font-weight:600;}
            }
          }
          &.sub_nav{
            li{border-color:darken($dark,20%);
              span{background-color:$darker;}
              &.active{
                span{background-color: $darker;}
                a{color:$darker !important;}
              }
              ul{
                li{
                  span{background-color:darken($dark,20%) !important;}
                  a{color:darken($dark,40%) !important;;}
                  &.active{
                    span{background-color: $darker !important;}
                    a{color:$darker !important;font-weight:600;}
                  }
                }
              }
            }
          }
        }
        &.active{
          .fa.fa-caret-right,.fa.fa-caret-down,.iconfont{color:$green_main;}
          a{color:$green_main;}
          ul{
            li{color:$darker;}
          }
        }
      }
    }
  }
  .main_cont{background-color:$gray_light;
    .tabs{background-color:$green_light;border:1px solid $green_main;
      ul{
        li{background-color:$white;border:{top:1px solid $green_main;right:1px solid $green_main;bottom:0;left:1px solid $green_main;};
          &.active{background-color:$green_main;color:$white;}
        }
      }
    }
  }
  .r_ctrl_cont{background-color:$green_ctrl_bg;
    .r_ctrl{background-color:$green_ctrl;transition:all .5s ease-in-out;
      i{color:$darker;}
    }
    .title{border-bottom:1px solid $gray_bg;color:$black;}
    .label{color:$black;}
    .cont{border-bottom:1px solid $gray_bg;}
    &.show_ctrl{
      .r_ctrl{background-color:$green_ctrl_show;transition:all .5s ease-in-out;
        i{color:$darker;}
      }
    }
  }
}
.tab_ctrl{background-color:$white;border-left:1px solid $green_main;border:{top:0;right:1px solid $green_main;bottom:1px solid $green_main;left:1px solid $green_main;};margin-top:0;
  .search_cont{border-bottom:1px solid $green_main;}
  .ctrl_cont{
    ul{
      li{border-right:1px solid lighten($darker,20%);color:$gray_n_blue;}
    }
  }
  &.tab_btn{border-bottom:1px solid $green_main;}
  &.no_bg{
    .search_cont{border-bottom:1px solid $green_main;}
  }
}
.tab_cont,.tab_c{border:{top:0;right:1px solid $green_main;bottom:1px solid $green_main;left:1px solid $green_main;};
  .paginate{border-top:1px solid $green_main;}
}
.form_cont{
  .input_inline{
    input[type=text],select{border:1px solid $darker;}
  }
}
.btn{border:1px solid $green_main;color:$green_main;
  &.main_btn{background-color:$green_main;}
  &:hover{background-color:$green_main;color:$white;}
  &.btn_prime{background-color:$green_main;color:$white;border:0;}
}
.popup{
  .popup_close{color:$white;}
  .popup_head{color:$white;background-color:$green-main;}
}
.alert{
  .alert_head{color:$white;background-color:$green-main;
    .fa{color:$yellow;}
  }
}